<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<div class="cuIcon-back icon left" @click="back"></div>
				<div class="center">{{ data.book_name }}
				</div>
				<div class='right'>
					<div class='cuIcon-musicfill' @click='playMusic(1)' v-show='isPlay==2'></div>
					<div class='cuIcon-musicforbidfill' @click='playMusic(2)' v-show='isPlay==1'></div>

					<div class='cuIcon-video' @click='playNext()' v-show='!isNext'></div>
					<div class='cuIcon-stop' @click='playStop()' v-show='isNext'></div>


					<div class='cuIcon-more' @click='pageTo()'></div>
				</div>
			</view>
		</view>
		<div style="width: 100%;height: 50px;"></div>
		<div class="dataCont" @click="clickImg(swiperList[currentIndex])">


			<swiper class="screen-swiper myBookImg" duration="400" easing-function="default" :current='currentIndex'
				v-show="!isShow" >
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<!-- <image :src="item" mode="" alt="" @load='imgLoad' :class="currentIndex!=index?'imgCss1':'imgCss2'"> -->
					<image :src="item" mode="" alt="" @load='imgLoad'  class="imgCss">
					</image>
				</swiper-item>
				<!-- <img :src="swiperList[currentIndex]" alt="" class='myBookImg'> -->
			</swiper>





			<!-- 
			<image :src="imgurl" alt="" v-show="!isShow" class="myBookImg" style="" @load='imgLoad'
				@click="clickImg(imgurl)"></image> -->
			<div @click.stop="previous" class='myBookBtnLeft' v-show="!isShow"></div>
			<div @click.stop="next" class='myBookBtnRight' v-show="!isShow"></div>
			<canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" @touchstart="touchStart"
				@touchmove="touchMove" @touchend="touchEnd" @mousedown.native="gtouchstart"
				@mousemove.native="gtouchmove" @mouseup.native="gtouchend"
				:style="{ width: w + 'px', height: h + 'px' }"></canvas>
		</div>
		<div style="height: 100rpx;"></div>
		<div class="myTabBar">
			<div class='allPage' v-if='pageToIndex'>

				<div class='cuIcon-top' style='transform:rotate(-90deg);' @click='pageNumberTo(1)'></div>
				<div class='cuIcon-back' @click="pageNumberTo('-')"></div>
				<div class='' style='display: flex;align-items: center;justify-content: center;'><input type="text"
						v-model="pageNumber"
						style="display: inline-block;width: 60rpx;text-align: right;background-color: rgba(255, 255, 255, 0.5);border-radius: 10rpx;text-align: center;" /><span>/{{max_number}}</span>
				</div>
				<div class='cuIcon-right' @click="pageNumberTo('+')"></div>
				<div class='cuIcon-down' style='transform:rotate(-90deg);' @click="pageNumberTo('max')"></div>

			</div>
			<div @click="addMark()">
				<div class="startImg"></div>
				<div v-show="mark == 1">添加标注</div>
				<div v-show="mark == 2">保存标注</div>
				<div v-show="mark == 3">取消标注</div>
			</div>
			<div @click="addBookmarks()">
				<div class="bookImg"></div>
				<div v-show="!Bookmarks">添加书签</div>
				<div v-show="Bookmarks">删除书签</div>
			</div>
			<div @click="list()">
				<div class="videoImg"></div>
				<div>目录</div>
			</div>
			<div @click="imgIn()">
				<div class="myImg"></div>
				<div>缩略图</div>
			</div>
		</div>
		<view class="cu-modal drawer-modal justify-start" :class="modalName == 'DrawerModalL' ? 'show' : ''">
			<view class="cu-dialog" style="top:0px,min-height:100vh;width:100vw;overflow: auto;" v-show="isList"
				@click="hideModal">
				<div class="markName">
					<div @click.stop="openList(1)" :style="listIndex == 1 ? 'color:#1C81DF' : ''">目录</div>
					<div :style="listIndex == 2 ? 'border-left: 1rpx solid #ddd;color:#1C81DF' : 'border-left: 1rpx solid #ddd;'"
						@click.stop="openList(2)">书签</div>
				</div>
				<div style="height: 100rpx;"></div>
				<view class="menu text-left" v-show="listIndex == 2">
					<view class="listItem" v-for="(item, index) in listData" :key="'0-' + index" @click="indexTo(item)">
						<div class="name">{{ item.name }}</div>
						<div class="right"></div>
					</view>
				</view>
				<view class=" menu text-left" v-show="listIndex == 1">
					<view class="" v-for="(item, index) in BookList" :key="'0~' + index">
						<!-- <view class="content">
							<view>{{item.name}}</view>
						</view> -->
						<!-- <div class="contItem">
							<div class="left">
								<div class="title">{{ item.name }}</div>
								<div class="info">共{{ item.num }}节</div>
							</div>
						</div> -->
						<div class="listItem" v-for="(itemData, i) in item.second" :key="'0' + i"
							@click="indexTo(itemData)">
							<div class="name">{{ item.name+'~'+itemData.name }}</div>
							<div class="right"></div>
						</div>

					</view>
				</view>
			</view>
			<view class="cu-dialog" style="top:0px,min-height:100vh;width:100vw;overflow: auto;" v-show="isImg"
				@click="hideModal">
				<!-- <view class="cu-list menu text-left myAll">
					<view class="allImgItem" v-for="(item, index) in allData" :key="'index' + index" @click="imgTo(item)"><img :src="item.image_url"
						 alt=""/></view>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<div class='getMoreData' @click='getMore' v-show='count/page_index>page_num'>获取更多</div>
				</view> -->
				<scroll-view style="height:100%" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
					@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view class="cu-list menu text-left myAll">
						<view class="allImgItem" v-for="(item, index) in allData" :key="'index' + index"
							@click="imgTo(item)"><img :src="item.image_url" alt="" /></view>
						<i></i>
						<i></i>
						<i></i>
						<i></i>
						<i></i>
						<i></i>
						<div class='getMoreData' @click='getMore' v-show='count/page_index>page_num'></div>
					</view>
				</scroll-view>
			</view>
			<!-- 			<view class="cu-modal" :class="DialogModal1=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">Modal标题</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						Modal 内容。
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="hideModal">确定</button>
						</view>
					</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
	export default {
		data() {
			return {
				id: '',
				from: 2,
				scrollTop: 0,
				data: {},
				isImg: false, //缩略图
				isList: false, //目录
				Bookmarks: false, //是否添加书签
				mark: 1, //是否添加标注
				modalName: null, //侧边栏
				// DialogModal1:'DialogModal1',
				allData: [],
				imgurl: '',
				pen: 3, //画笔粗细默认值
				color: '#cc0033', //画笔颜色默认值
				startX: 0, //保存X坐标轴变量
				startY: 0, //保存X坐标轴变量
				w: '', //canvas宽高区域
				h: '',
				ctx: {},
				// allDrawWorksPath: [] //图片路径 用于撤销
				isShow: false,
				isPc: false,
				page_number: 1,
				max_number: 1,
				isPlay: 2,
				image: {},
				bookmark: {},
				graffiti: {},
				listData: [],
				BookList: [],
				listIndex: 1,
				musicUrl: '',
				lastRecord: '',
				page_index: 1,
				page_num: 12,
				count: 0,
				isNext: false,
				pageToIndex: false,
				pageNumber: 1,
				isEnd: true,
				timer: null,
				swiperList: [],
				currentIndex: 0,
				innerAudioContext: uni.createInnerAudioContext(),
				bjimg: ''
			};
		},
		components: {},
		onLoad(e) {
			//console.log('e==入参===', e);
			this.id = e.id;
			this.from = e.from || 2;
			this.getSystemInfo(); //获取设备信息
			this.imgurl = '';
			// 'https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/72f082025aafa40f2982756baa64034f78f0193b.jpg'; //网络图片的服务器需要运行跨域，否在无法保存图片(转为base64格式)
		},
		onShow() {
			// this.getData()
			//console.log('执行了onShow');
			this.innerAudioContext = uni.createInnerAudioContext()
			this.musicUrl = ''
			this.playStop()
			uni.hideToast();
			this.getBooks();
		},
		mounted() {},
		// onReachBottom() {
		// 	//console.log(this.count / this.page_index);
		// 	if (this.count / this.page_index > this.page_num) {
		// 		this.page_index++;
		// 		this.getMoreImgList()();
		// 		//console.log('加载更多');
		// 	} else {
		// 		//console.log('没有更多了');
		// 	}
		// },

		onHide() {
			//console.log('执行了onHide')
			this.innerAudioContext.destroy() // 销毁
			clearInterval(this.timer)
			uni.hideToast();
		},
		beforeDestroy() {
			//console.log('执行了beforeDestroy')
			this.innerAudioContext.destroy() // 销毁
			clearInterval(this.timer)
			uni.hideToast();
		},
		watch: {
			pageNumber(val) {
				//console.log('page_number===',val)
				if (this.pageNumber != this.page_number) {
					if (this.pageNumber > this.max_number) {
						this.pageNumber = this.max_number
					}
					if (this.pageNumber < 1) {
						this.pageNumber = 1
					}
					this.page_number = this.pageNumber
					this.getBooks();
				}
			},
			page_number(val) {
				let _this = this
				setTimeout(() => {
					if(_this.isEnd){
						_this.currentIndex = val - 1
					}
				}, 500)
				//console.log(val)

				// this.bjimg=`background-image: url(${this.swiperList[this.currentIndex]});`
			},
		},
		methods: {
			pageNumberTo(str) {
				if (str == 1) {
					if (this.page_number != 1) {
						this.page_number = 1;
						this.getBooks();
					}
				} else if (str == '-') {
					if (this.page_number > 1) {
						this.page_number--;
						this.getBooks();
					}
				} else if (str == '+') {
					if (this.max_number > this.page_number) {
						this.page_number++;
						this.getBooks();
					}
				} else if (str == 'max') {
					if (this.page_number != this.max_number) {
						this.page_number = this.max_number;
						this.getBooks();
					}
				}
			},
			pageTo() {
				this.pageToIndex = !this.pageToIndex
				this.playStop()
			},
			playNext() {
				//console.log('开始下一页');
				this.isNext = true
				let _this = this
				this.timer = setInterval(() => {
					if (_this.isEnd) {
						_this.next()
					}
				}, 2000)
			},
			playStop() {
				//console.log('停止下一页');
				this.isNext = false
				clearInterval(this.timer)
			},
			clickImg(url) {
				this.playStop()
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			playMusic() {
				this.playStop()
				if (this.isPlay == 1) {
					//console.log('播放')
					this.innerAudioContext.play(); // 播放
					this.isPlay = 2
				} else {
					//console.log('取消播放')
					this.innerAudioContext.pause(); // 暂停
					this.isPlay = 1
				}
			},
			playVoice(url) { // url即为音频路径
				if (url) {
					// 判断路径是否已经被赋值，以及音频播放状态 !this.innerAudioContext.paused为正在播放
					if (this.lastRecord == url && !this.innerAudioContext.paused) {
						this.innerAudioContext.stop(); // 停止
						return;
					}
					this.lastRecord = url; // 将路径赋值给定义的变量好做判断
					this.innerAudioContext.src = url; // 配置音频播放路径
					this.innerAudioContext.play(); // 播放
					this.innerAudioContext.loop = true // 是否循环播放

					// this.innerAudioContext.pause(); // 暂停
					// this.isPlay = 1
				}
			},
			imgLoad() {
				//console.log('图片加载完了')
				this.isEnd = true
				let _this=this
				setTimeout(() => {
					_this.currentIndex = _this.page_number - 1
				}, 500)
				uni.hideToast()
			},
			upper(e) {
				// //console.log('upper==', e)
			},
			lower(e) {
				//console.log('lower=滚动到了底部=', e)
				if (this.count / this.page_index > this.page_num) {
					this.getMore()
				}
			},
			scroll(e) {
				// //console.log('scroll==', e)
			},
			getMore() {
				if (this.count / this.page_index > this.page_num) {
					this.page_index++;
					this.getMoreImgList()();
					//console.log('加载更多');
				} else {
					//console.log('没有更多了');
				}
			},
			getBooks() {
				let _this = this;
				_this.uniRequest({
					url: `/books/exhibition`,
					method: 'post',
					data: {
						book_id: _this.id,
						page_number: _this.page_number
					},
					success: res => {
						// uni.showToast({
						// 	title: '加载中...',
						// 	icon: 'loading',
						// 	duration: 20000 // 当然这个时间可根据实用场景进行相关设置
						// })
						//console.log('返回值', res);


						if (res.code == 200) {
							this.data = res.data;
							this.page_number = res.data.now_page_number;
							this.max_number = res.data.max_id;
							this.image = res.data.image;
							this.pageNumber = this.page_number
							if (this.imgurl != res.data.image.image_url) {
								uni.showToast({
									title: '加载中...',
									icon: 'loading',
									duration: 20000 ,// 当然这个时间可根据实用场景进行相关设置
									mask: true,
								})
								this.isEnd = false
							}

							if (this.swiperList.indexOf(res.data.image.image_url) == '-1') {
								this.swiperList[this.page_number - 1] = res.data.image.image_url
							} else {
								this.isEnd = true
								uni.hideToast()
							}


							this.imgurl = res.data.image.image_url;
							//console.log(this.musicUrl != res.data.music, 'res.data.music==', res.data.music)
							if (this.musicUrl != res.data.music) {
								this.musicUrl = res.data.music
								this.playVoice(this.musicUrl)
							}
							this.bookmark = res.data.bookmark;
							this.graffiti = res.data.graffiti;
							if (this.bookmark.name) {
								this.Bookmarks = true;
							} else {
								this.Bookmarks = false;
							}
							if (this.graffiti.image_url) {
								//存在标注，显示取消
								this.mark = 3;
								this.imgurl = res.data.graffiti.image_url;
								// let i=this.swiperList.indexOf(res.data.image.image_url)
								this.swiperList[this.page_number - 1] = res.data.graffiti.image_url
								this.isEnd = true
								uni.hideToast()
							} else {
								this.mark = 1;
							}
							// this.bjimg = this.swiperList[this.currentIndex]
							_this.bjimg=`background-image: url(${this.swiperList[this.currentIndex]})`
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},

			// 上一页
			previous() {
				console.log('上一页');
				if(this.isEnd){
					if (this.page_number > 1) {
						this.page_number--;
						this.getBooks();
					}
				}
			},
			// 下一页
			next() {
				console.log('下一页');
				if(this.isEnd){
					if (this.max_number > this.page_number) {
						this.page_number++;
						this.getBooks();
					} else {
						this.playStop()
					}
				}
				
			},

			//打开书签
			getMarkBooks() {
				let _this = this;
				_this.uniRequest({
					url: `/book_mark/list`,
					method: 'post',
					data: {
						book_id: _this.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.listData = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			//添加书签
			addMarkTo() {
				let _this = this;
				_this.uniRequest({
					url: `/book_mark/insert`,
					method: 'post',
					data: {
						book_id: _this.id,
						page_number: _this.page_number,
						name: _this.data.book_name + '~第' + _this.page_number + '页'
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.Bookmarks = !this.Bookmarks;
							this.bookmark = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			//删除书签
			delMarkTo() {
				let _this = this;
				_this.uniRequest({
					url: `/book_mark/delete`,
					method: 'post',
					data: {
						book_id: _this.id,
						id: _this.bookmark.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.Bookmarks = !this.Bookmarks;
							this.bookmark = {};
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},

			//添加标注
			addMarkImgTo(item) {
				let _this = this;
				// base64ToPath(item)
				//   .then(path => {
				//     //console.log('item==',path)
				//   })
				//   .catch(error => {
				//     console.error(error)
				//   })
				//   return
				// //console.log('item==', item);
				let fileData = item;
				uni.uploadFile({
					url: 'http://182.92.112.230' + `/book_graffiti/insert`, //服务器地址
					fileType: 'image', //ZFB必填,不然报错
					filePath: fileData, //这个就是我们上面拍照返回或者先中照片返回的数组
					name: 'file',
					// formData: this.sendDate,
					formData: {
						book_id: _this.id,
						page_number: _this.page_number
					},
					header: {
						token: uni.getStorageSync('token')
					},
					success: uploadFileRes => {
						if (uploadFileRes.errMsg == 'uploadFile:ok') {
							uni.hideToast();
							let imgData = JSON.parse(uploadFileRes.data);
							//console.log('imgData===', imgData);
							_this.mark = 3;
							_this.getBooks();
						}
					}
				});
			},
			//删除标注
			delMarkImgTo() {
				let _this = this;
				_this.uniRequest({
					url: `/book_graffiti/delete`,
					method: 'post',
					data: {
						book_id: _this.id,
						id: _this.graffiti.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.Bookmarks = !this.Bookmarks;
							this.graffiti = {};
							_this.getBooks();
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			// 打开目录
			getBookList() {
				let _this = this;
				_this.uniRequest({
					url: `/books/classify`,
					method: 'post',
					data: {
						id: _this.id
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.BookList = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},

			// 打开缩略图目录
			getImgList() {
				let _this = this;
				_this.uniRequest({
					url: `/books/thumbnail`,
					method: 'post',
					data: {
						book_id: _this.id,
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.count = res.data.count;
							// this.allData = this.allData.concat(res.data.images);
							this.allData = res.data.images;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			// 打开更多缩略图目录
			getMoreImgList() {
				let _this = this;
				_this.uniRequest({
					url: `/books/thumbnail`,
					method: 'post',
					data: {
						book_id: _this.id,
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.count = res.data.count;
							this.allData = this.allData.concat(res.data.images);
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			// ==================================================================

			imgIn() {
				//缩略图
				this.playStop()
				this.isImg = true;
				this.modalName = 'DrawerModalL';
				this.getImgList()
			},
			imgTo(imgItem) {
				//缩略图
				this.isImg = false;
				this.modalName = null;
				//console.log('imgItem==', imgItem);
				this.id = imgItem.book_id;
				this.page_number = imgItem.page_number;
				this.getBooks();
			},

			openList(num) {
				this.listIndex = num;
				if (num == 1) {
					//console.log('打开目录');
					this.getBookList();
				} else {
					//console.log('打开书签');
					this.getMarkBooks();
				}
			},
			hideModal() {
				this.modalName = null;
				this.isImg = false //缩略图
				this.isList = false //目录
				this.listIndex = 1 //目录
			},
			indexTo(item) {
				//console.log('index==', item);
				this.modalName = null;
				this.isList = false;
				// this.id = item.book_id;
				this.page_number = item.jump_page || item.page_number;
				this.getBooks();
			},
			addMark() {
				this.playStop()
				if (this.mark == 1) {
					// 打开涂鸦
					//console.log('开始涂鸦');
					this.start();
				} else if (this.mark == 2) {
					// 保存标注
					//console.log('保存标注');
					this.start();
				} else {
					// 取消标注
					this.delMarkImgTo();
				}
			},
			addBookmarks() {
				this.playStop()
				if (!this.Bookmarks) {
					//console.log('添加书签');
					this.addMarkTo();
				} else {
					//console.log('删除书签');
					this.delMarkTo();
				}
				// this.Bookmarks = !this.Bookmarks
			},
			list() {
				this.playStop()
				this.isList = true;
				this.modalName = 'DrawerModalL';
				this.openList(1);
			},

			back() {
				clearInterval(this.timer)
				this.innerAudioContext.destroy()
				// uni.navigateBack();
				uni.navigateTo({
					url: `/pages/book/details?id=${this.id}&from=${this.from}`
				});
			},

			// ==============================================下面是涂鸦相关的==============================================
			// 是否开始画图
			start() {
				if (!this.isShow) {
					this.isShow = !this.isShow;
					// this.mark = 2;
					this.init();
				} else {
					this.isShow = !this.isShow;
					// this.mark = 3;
					this.saveimg();
				}
			},
			// 初始化画布
			init() {
				var that = this;
				//console.log('imgurl', that.imgurl);
				that.ctx = uni.createCanvasContext('myCanvas', this);
				uni.getImageInfo({
					src: that.imgurl,
					success(ress) {
						//console.log('图片信息', ress);
						that.ctx.drawImage(ress.path, 0, 0, that.w, that.h);
						that.ctx.stroke();
						that.ctx.draw(true, () => {
							// that.ctx.getActions() // 获取绘图动作数组
						});
						that.mark = 2;
					},
					fail(err) {
						//console.log('err', err);
					}
				});
			},
			// 保存图片按钮
			saveimg() {
				uni.showToast({
					title: '图片保存中...',
					icon: 'loading',
					duration: 20000 // 当然这个时间可根据实用场景进行相关设置
				});
				var _this = this;
				//console.log('保存图片1')
				// this.ctx.draw(true);
				// //console.log('保存图片2')
				// setTimeout(function() {
				// 	_this.drawAfter();

				// }, 500);
				this.ctx.draw(false, (() => {
					_this.drawAfter();

				})())
			},

			// 保存图片事件
			drawAfter() {
				let that = this;
				//console.log('保存图片3')
				uni.canvasToTempFilePath({
						width: that.w, //686
						height: that.h,
						canvasId: 'myCanvas',
						fileType: 'jpg',
						success(res) {
							//console.log('res==', res);
							var tempFilePath = res.tempFilePath;
							base64ToPath(tempFilePath)
								.then(path => {
									//console.log('path==', path);
									that.addMarkImgTo(path);
								})
								.catch(error => {
									console.error(error);
								});

						},
						fail(err) {
							console.log('err==', err)
							uni.showToast({
								title: err.errMsg,
								mask: true,
								duration: 1000,
								icon: 'none'
							})
						}
					},
					this
				);
			},
			// 画图动作pc端兼容
			// 鼠标按下事件
			gtouchstart(item) {
				this.isPc = true;
				//console.log('鼠标按下===', item);
				let e = {
					changedTouches: [{
						x: 0,
						y: 0
					}]
				};
				e.changedTouches[0].x = item.pageX;
				e.changedTouches[0].y = item.pageY - 50;
				this.touchStart(e);
			},
			// 鼠标按下移动事件
			gtouchmove(item) {
				if (this.isPc) {
					//console.log('鼠标按下移动===', item);
					let e = {
						changedTouches: [{
							x: 0,
							y: 0
						}]
					};
					e.changedTouches[0].x = item.pageX;
					e.changedTouches[0].y = item.pageY - 50;
					this.touchMove(e);
				}
			},
			// 鼠标松开事件
			gtouchend(item) {
				this.isPc = false;
				//console.log('鼠标松开===', item);
				this.touchEnd();
			},

			// 开始
			touchStart(e) {
				//console.log('开始绘制', e);
				//得到触摸点的坐标
				this.startX = e.changedTouches[0].x;
				this.startY = e.changedTouches[0].y;
				//console.log('画笔颜色', this.color, this.pen);
				this.ctx.setStrokeStyle(this.color); //画笔颜色
				this.ctx.setLineWidth(this.pen); //线条宽度
				this.ctx.setLineCap('round'); // 让线条圆润
				this.ctx.beginPath();
				// this.saveCurrentDrawWorks(); //记录每一步步骤-撤销
			},
			//手指触摸后移动
			touchMove(e) {
				//console.log('开始移动中', e);
				var startX1 = e.changedTouches[0].x;
				var startY1 = e.changedTouches[0].y;
				this.ctx.moveTo(this.startX, this.startY);
				this.ctx.lineTo(startX1, startY1);
				this.ctx.stroke();
				this.startX = startX1;
				this.startY = startY1;

				//只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。
				// context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
				let that = this;
				that.ctx.draw(true, () => {
					setTimeout(() => {
						// that.ctx.getActions(); // 获取绘图动作数组
					}, 0);
					// that.ctx.getActions() // 获取绘图动作数组
				});
			},
			//手指触摸动作结束
			touchEnd() {
				//console.log('停止');
			},

			// 获取设备信息
			getSystemInfo() {
				let that = this;
				setTimeout(() => {
					uni.getSystemInfo({
						success(res) {
							//console.log('设备信息', res);
							that.h = res.windowHeight - 120; //若加底部操作区域 需-60 单位px
							that.w = res.windowWidth;
						}
					});
				}, 500);
			}
		}
	};
</script>

<style lang="less" scoped>
	.content {
		background-color: white;

		// .imgCss1 {
		// 	position: relative;
		// }

		// .imgCss1::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	width: 100%;
		// 	height: 100%;
		// 	z-index: 1;
		// 	// background-color: rgba(0, 0, 0, 0.5);
		// }
		.imgCss{
			// border-left: 1px solid rgba(202, 202, 202, 0.5);
			// border-right: 1px solid rgba(202, 202, 202, 0.5);
			// box-shadow: 0px 2px 12px 0px rgba(202, 202, 202, 0.5);
		}

		.screen-swiper {
			pointer-events: none;
		}

		.topNav {
			/* background: #1C81DF;
			color: white; */
			background: white;
			color: #767981;

			.right {
				display: flex;
				justify-content: space-between;
				min-width: 120rpx;
			}
		}

		.myCanvas {
			/* width: 100%;
			height: calc(100vh - 190rpx); */
		}

		.markName {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			border-bottom: 1rpx solid #ddd;
			background-color: white;
			display: flex;

			>div {
				width: 50%;
				line-height: 100rpx;
			}
		}
		.dataCont {
			min-width: 100vw;
			overflow-x: auto;

			.myBookImg {
				width: 100%;
				height: calc(100% - 120px);
				position: fixed;
				top: 50px;
				z-index: 1;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			// .myBookImg::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	right: 0;
			// 	width: 100%;
			// 	height: 100%;
			// 	background-repeat: no-repeat;
			// 	background-size: 100% 100%;
			// 	background-image: url(../../static/imgs/bg_denglu.png);
			// 	z-index: 0;
			// }

			.myBookBtnLeft {
				position: fixed;
				top: 50px;
				width: 25%;
				height: calc(100vh - 120px);
				z-index: 5;
				left: 0;
			}

			.myBookBtnRight {
				position: fixed;
				top: 50px;
				width: 25%;
				height: calc(100vh - 120px);
				z-index: 5;
				right: 0;
			}
		}

		.myTabBar {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			z-index: 9;
			width: 100vw;
			background-color: white;
			border-top: 1px solid f8f8fa;
			font-size: 24rpx;
			box-shadow: 0px 2px 12px 0px rgba(202, 202, 202, 0.5);
			border-radius: 20rpx 20rpx 0 0;

			.allPage {
				position: absolute;
				width: 100vw;
				top: -100rpx;
				line-height: 100rpx;
				background-color: rgba(0, 0, 0, 0.3);
				display: flex;
				font-size: 32rpx;
				justify-content: space-around;
			}

			.startImg {
				background: url(~@/static/imgs/icon_tianjia_biaozhu.png) no-repeat center;
				background-size: 100% 100%;
				width: 44rpx;
				height: 44rpx;
				margin: 0 auto;
			}

			.bookImg {
				background: url(~@/static/imgs/icon_tianjia_shuqian.png) no-repeat center;
				background-size: 100% 100%;
				width: 44rpx;
				height: 44rpx;
				margin: 0 auto;
			}

			.videoImg {
				background: url(~@/static/imgs/icon_mulu.png) no-repeat center;
				background-size: 100% 100%;
				width: 44rpx;
				height: 44rpx;
				margin: 0 auto;
			}

			.myImg {
				background: url(~@/static/imgs/icon_suoluetu.png) no-repeat center;
				background-size: 100% 100%;
				width: 44rpx;
				height: 44rpx;
				margin: 0 auto;
			}
		}

		.myAll {
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			padding: 10rpx 0 0;

			.allImgItem {
				width: 30%;
				border-radius: 20rpx;
				margin-bottom: 10rpx;

				img {
					width: 100%;
				}
			}

			>i {
				width: 30%;
			}
		}

		.contItem {
			padding: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #181e27;
				}

				.info {
					font-size: 24rpx;
					font-weight: normal;
					color: #1c81df;
				}
			}

			.right {
				height: 14rpx;
				width: 22rpx;
			}

			.right.open {
				background: url(~@/static/imgs/icon_liat_zhankai_o.png) no-repeat center;
				background-size: 100% 100%;
			}

			.right.close {
				background: url(~@/static/imgs/icon_list_zhankai.png) no-repeat center;
				background-size: 100% 100%;
			}
		}

		.selected {
			background: #d9edff;
		}

		.listItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 32rpx 0;
			// margin: 0 32rpx;
			padding: 0 32rpx;
			// border-bottom: 1px solid #e2e4e7;
			background-color: white;
			width: 100%;
			line-height: 80rpx;
			box-sizing: border-box;

			.name {
				font-size: 30rpx;
				font-weight: normal;
				color: #575c65;
				position: relative;
				// padding-left: 40rpx;
			}

			// .name::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: calc(50% - 14rpx);
			// 	background: url(~@/static/imgs/icon_list_erji_liebiao.png) no-repeat center;
			// 	background-size: 100% 100%;
			// 	height: 28rpx;
			// 	width: 26rpx;
			// }

			.right {
				background: url(~@/static/imgs/icon_arrow.png) no-repeat center;
				background-size: 100% 100%;
				height: 30rpx;
				width: 18rpx;
			}
		}

		.getMoreData {
			width: 100%;
			line-height: 100rpx;
		}
	}
</style>
